<script setup lang="ts">
import {markRaw, onMounted, ref, watch} from "vue";
import type {EChartsOption, EChartsType} from "echarts";
import * as echarts from "echarts";
import {useGetRadarDataApi} from "@/api";
import type {Radar} from "@/interface";
import 'echarts-wordcloud'


interface Props {
  name:string;
}
const radar = ref()
const option = ref<EChartsOption>()
const myChart = ref<EChartsType>()
const radarData = ref<Radar>({
  name:[],
  value:[]
})
const props = defineProps<Props>()
const init = async () => {
  const {data:res} = await useGetRadarDataApi()
  radarData.value = res
  myChart.value = markRaw(echarts.init(radar.value));
  draw();
}
const draw = () => {
  const data = radarData.value.value.filter(value => value.name === props.name)
  option.value = {
    title: {
      text: props.name,
      left:'right',
      textStyle:{
        color: 'rgb(238, 197, 102)'
      }
    },
    tooltip:{},
    radar: {
      shape: 'circle',
      splitNumber: 5,
      axisName: {
        color: 'rgb(238, 197, 102)'
      },
      splitLine: {
        lineStyle: {
          color: [
            'rgba(238, 197, 102, 0.1)',
            'rgba(238, 197, 102, 0.2)',
            'rgba(238, 197, 102, 0.4)',
            'rgba(238, 197, 102, 0.6)',
            'rgba(238, 197, 102, 0.8)',
            'rgba(238, 197, 102, 1)'
          ].reverse()
        }
      },
      splitArea: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(238, 197, 102, 0.5)'
        }
      },
      indicator: radarData.value.name
    },
    series: [
      {
        name: '景点',
        type: 'radar',
        data: data,
        symbol: 'none',
        lineStyle:{
          width: 1,
          opacity: 0.5
        },
        itemStyle: {
          color: '#F9713C'
        },
        areaStyle: {
          opacity: 0.1
        }
      }
    ]
  }
  myChart.value.setOption(option.value, {notMerge: true});
}
watch(
    () => props.name,
    (value, oldValue)=> {
      draw()
    }
)
onMounted(() => {
  init()
})
</script>

<template>
  <div ref="radar" class="radar">
  </div>
</template>

<style scoped>
.radar{
  width: 100%;
  height: 100%;
}
</style>